<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="headCont">
        <div class="userCont">
          <div class="notice" v-if="showMsgCount > 0" @click="noticeFn">
            <div class="iconfont icon-tongzhi1"></div>
            <div>{{ showMsgCount }}+</div>
          </div>
          <div class="userImg">
            <img :src="userInfo.head_img" />
          </div>
          <div class="userInfo">
            <div class="userName">
              <div>{{ userInfo.nick_name }}</div>
            </div>
            <div class="userDes">
              <div>UID：{{ userInfo.uid }}</div>
              <div @click="copyFn" class="copyBtn iconfont icon-fuzhi"></div>
            </div>
          </div>
        </div>
        <div class="carCont">
          <div class="carItem" @click="workRecord">
            <div class="carNum">{{ userInfo.gwzm }}</div>
            <div class="carName">岗位招募</div>
          </div>
          <div class="carItem" @click="getBook">
            <div class="carNum">{{ userInfo.sdjl }}</div>
            <div class="carName">收到简历</div>
          </div>
          <div class="carItem" @click="saveList">
            <div class="carNum">{{ userInfo.scjl }}</div>
            <div class="carName">收藏记录</div>
          </div>
        </div>
        <div class="vipCont" v-if="userInfo.is_member == 1" @click="toVip">
          <!-- <img src="/img/vip.png" /> -->
          <div class="vipIcon iconfont icon-f-vip1"></div>
          <div class="vipInfo">
            <div class="vipName">企业版会员</div>
            <div class="vipDes">优先派单 极速接单 接单不上限</div>
          </div>
          <div class="openBtn">开通会员</div>
        </div>
        <div class="vipCont" v-if="userInfo.is_member != 1" @click="toVip">
          <div class="vipIcon iconfont icon-f-vip1"></div>
          <div class="vipInfo">
            <div class="vipName">企业版会员</div>
            <div class="vipDes">到期时间：{{ userInfo.member_time }}</div>
          </div>
          <div class="openBtn">
            {{ userInfo.is_member == 3 ? "续费会员" : "会员中心" }}
          </div>
        </div>
      </div>
      <div class="navCont">
        <div class="navItem" @click="orderFn(1)">
          <div class="iconfont icon-shenhezhong"></div>
          <div>审核中</div>
        </div>
        <div class="navItem" @click="orderFn(2)">
          <div class="iconfont icon-zhaobiao"></div>
          <div>招标中</div>
        </div>
        <div class="navItem" @click="orderFn(3)">
          <div class="iconfont icon-jinhangzhong2"></div>
          <div>进行中</div>
        </div>
        <div class="navItem" @click="orderFn(4)">
          <div class="iconfont icon-wancheng"></div>
          <div>已完成</div>
        </div>
      </div>
      <div class="listCont">
        <div
          class="listItem"
          :key="index"
          @click="listFn(item)"
          v-for="(item, index) in listArr"
        >
          <div :class="'tagIcon iconfont ' + item.icon"></div>
          <div class="listName">
            {{ item.name }}
            <span v-if="item.name == '解锁联系' && userInfo.contact_cs > 0"
              >（剩余{{ userInfo.contact_cs }} 次）</span
            >
            <span v-if="item.name == '企业认证'">
              <span
                class="blackBtn"
                v-if="userInfo.enterprise_apply_status == 0"
                >(未认证)</span
              >
              <span class="blueBtn" v-if="userInfo.enterprise_apply_status == 1"
                >(待审核)</span
              >
              <span
                class="greenBtn"
                v-if="userInfo.enterprise_apply_status == 2"
                >(认证成功)</span
              >
              <span class="redBtn" v-if="userInfo.enterprise_apply_status == 3"
                >(认证失败)</span
              >
            </span>
          </div>
          <div class="iconfont icon-jiantou"></div>
        </div>
      </div>
    </div>
    <footcpm></footcpm>

    <van-popup v-model:show="showTalk" round position="bottom">
      <div class="maskCont">
        <div class="maskTitle">联系我们</div>
        <div class="talkImg">
          <img src="/img/erweima.jpg" />
        </div>
        <div class="maskDes textCenter">长按二维码添加客服微信</div>
        <div class="maskDes flexCont bigFont">
          <div class="iconfont icon-dianhua2"></div>
          <div>18483613963</div>
        </div>
        <div class="maskDes textCenter">欢迎致电，我们将为您提供帮助！</div>
        <div @click="telFn" class="copyBtn">立即拨号</div>
      </div>
    </van-popup>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import footcpm from "@/components/footcpm.vue";
import { showToast, showSuccessToast, showConfirmDialog } from "vant";
import getLoad from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import { My, getMessageCount } from "@/http/api";
export default {
  components: { footcpm, getLoad, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showTalk: false,
      userInfo: {},
      showMsgCount: 0,
      listArr: [
        { name: "企业认证", icon: "icon-qiyerenzheng3", url: "" },
        // {name:'我收藏的',icon:'icon-shoucang1',url:''},
        { name: "解锁联系", icon: "icon-jiesuo", url: "" },
        { name: "关于我们", icon: "icon-guanyu1", url: "" },
        { name: "意见反馈", icon: "icon-falvyijian", url: "" },
        { name: "联系我们", icon: "icon-kefu2" },
        // {name:'帮助中心',icon:'icon-bangzhu',url:''},
        { name: "合作申请", icon: "icon-wanshandeshengtaihezuo", url: "" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    telFn() {
      window.location.href = "tel:18483613963";
    },
    copyFn() {
      let oInput = document.createElement("input");
      oInput.value = this.userInfo.uid;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      showSuccessToast("复制成功");
      oInput.remove();
    },
    workRecord() {
      this.$router.push({ path: "/workRecord" });
    },
    saveList() {
      this.$router.push({ path: "/save" });
    },
    getBook() {
      this.$router.push({ path: "/getBook" });
    },
    orderFn(type) {
      this.$router.push({ path: "/order" });
    },
    toVip() {
      this.$router.push({ path: "/money" });
    },
    noticeFn() {
      this.$router.push({ path: "/msg" });
    },
    getMsg() {
      getMessageCount().then((res) => {
        if (res.data.code == 1) {
          this.showMsgCount = res.data.data;
        }
      });
    },
    listFn(item) {
      if (item.name == "联系我们") {
        this.showTalk = true;
      } else if (item.name == "解锁联系") {
        this.$router.push({ path: "/lookUser" });
      } else if (item.name == "意见反馈") {
        this.$router.push({ path: "/report" });
      } else if (item.name == "合作申请") {
        this.$router.push({ path: "/joinUs" });
      } else if (item.name == "关于我们") {
        this.$router.push({ path: "/about" });
      } else if (item.name == "企业认证") {
        this.$router.push({
          path: "/auth",
          query: { status: this.userInfo.enterprise_apply_status },
        });
      }
    },
    getData() {
      My()
        .then((res) => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getMsg();
  },
};
</script>
<style scoped lang="less">
.container {
  background-color: #f1f4fb;
  min-height: 100vh;
  .showCont {
    padding-bottom: 3.75rem;
    box-sizing: border-box;
  }
  .headCont {
    background-image: linear-gradient(to right bottom, #cbd8f7, #86a9fb);
    padding: 0.75rem 4% 0.75rem;
    box-sizing: border-box;
    color: #fff;
    position: relative;
    overflow: hidden;

    .userCont {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0.75rem 0;
      position: relative;
      .notice {
        position: absolute;
        right: 0rem;
        top: 1rem;
        display: flex;
        .iconfont {
          font-size: 1rem;
        }
      }
      .userImg {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        border: 3px solid #fff;
        overflow: hidden;
        img {
          border-radius: 50%;
          width: 100%;
        }
      }
      .userInfo {
        align-items: center;
        font-size: 0.9rem;
        margin-left: 0.75rem;
        .userName {
          font-weight: bold;
          display: flex;
          align-items: center;
          .userTag {
            padding: 0.1rem 0.5rem;
            background-color: #fff;
            color: #86a9fb;
            font-size: 0.6rem;
            font-weight: normal;
            border-radius: 0.1rem;
            margin-left: 0.5rem;
            transform: scale(0.9);
          }
        }
        .userDes {
          font-size: 0.6rem;
          margin-top: 0.25rem;
          display: flex;
          align-items: center;
          .copyBtn {
            margin-left: 0.75rem;
          }
          .workTag {
            display: flex;
            align-items: center;
            margin-right: 0.75rem;
            img {
              height: 1rem;
              position: relative;
              top: -0.1rem;
              margin-right: 0.25rem;
            }
          }
        }
      }
    }
    .carCont {
      width: 100%;
      background-color: #9cb2e4;
      padding: 0.75rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      margin-top: 0.25rem;
      display: flex;
      justify-content: space-between;
      .carItem {
        width: 30%;
        text-align: center;
        font-size: 0.6rem;
        .carName {
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            font-weight: bold;
          }
        }
        .carNum {
          font-size: 1rem;
          margin-bottom: 0.5rem;
        }
      }
    }
    .vipCont {
      width: 100%;
      margin: 0.75rem auto 0;
      background-image: linear-gradient(to right, #a0bbfa, #c5d5fb);
      // background-color: #fff;
      display: flex;
      justify-content: space-between;
      color: #fff;
      padding: 0.5rem 0.75rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      font-size: 0.6rem;
      align-items: center;
      img {
        height: 1.5rem;
        margin-right: 0.5rem;
      }
      .vipIcon {
        font-size: 1.5rem;
      }
      .vipInfo {
        flex: 1;
        width: 1rem;
        margin: 0 0.5rem;
        .vipName {
          font-size: 0.8rem;
          font-weight: bold;
          margin-bottom: 0.25rem;
        }
        .vipDes {
          font-size: 0.6rem;
        }
      }
      .openBtn {
        padding: 0.3rem 0.75rem;
        box-sizing: border-box;
        border: 1px solid #fff;
        color: #fff;
        font-size: 0.6rem;
        border-radius: 0.15rem;
      }
    }
  }
  .creatCar {
    // border: 2px solid #86a9fb;
    width: 92%;
    margin: 1rem auto;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    border-radius: 0.25rem;
    background-color: #fff;
    .noInfoName {
      text-align: center;
      font-size: 0.9rem;
      font-weight: bold;
      padding: 0.75rem 0;
    }
    .toSetBtn {
      padding: 0.75rem 0;
      text-align: center;
      width: 100%;
      margin-top: 0.75rem;
      background-image: linear-gradient(to right bottom, #cbd8f7, #86a9fb);
      color: #fff;
      border-radius: 0.25rem;
      font-size: 0.6rem;
    }
  }
  .navCont {
    width: 92%;
    margin: 0.75rem auto;
    background-color: #fff;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .navItem {
      width: 34%;
      padding: 0.75rem 0.5rem;
      box-sizing: border-box;
      text-align: center;
      color: #333;
      .iconfont {
        line-height: 2rem;
        font-size: 1.5rem;
        color: #86a9fb;
        margin-bottom: 0.25rem;
      }
    }
  }
  .listCont {
    width: 92%;
    margin: 1rem auto;
    border-radius: 0.25rem;
    background-color: #fff;
    .listItem {
      width: 100%;
      padding: 0.75rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      color: #333;
      img {
        height: 1rem;
      }
      .listName {
        flex: 1;
        width: 1rem;
        margin: 0 0.75rem;
        .greenBtn {
          color: #85ce61;
        }
        .blueBtn {
          color: #86a9fb;
        }
        .redBtn {
          color: #f56c6c;
        }
        .blackBtn {
          color: #999;
        }
      }
      .iconfont {
        color: #333;
      }
      .tagIcon {
        font-size: 1rem;
      }
    }
  }
  .maskCont {
    padding: 0.75rem 4%;
    box-sizing: border-box;
    .maskTitle {
      text-align: center;
      font-size: 0.9rem;
      font-weight: bold;
    }
    .talkImg {
      text-align: center;
      margin: 0.75rem 0;
      img {
        width: 40%;
      }
    }
    .maskDes {
      font-size: 0.65rem;
      margin: 0.75rem 0;
      .redText {
        color: #f75325;
      }
    }
    .textCenter {
      text-align: center;
    }
    .flexCont {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bigFont {
      font-size: 1rem;
      font-weight: bold;
      .iconfont {
        font-size: 1.2rem;
        margin-right: 0.25rem;
      }
    }
    .copyBtn {
      background-color: #86a9fb;
      width: 100%;
      margin-top: 1rem;
      text-align: center;
      padding: 0.75rem 0;
      border-radius: 0.25rem;
      color: #fff;
      font-size: 0.6rem;
    }
    .maskArr {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .maskArrItem {
        text-align: center;
        width: 48%;
        background-color: #86a9fb;
        // border: 1px solid #ccc;
        border-radius: 0.25rem;
        padding: 0.6rem 0;
        color: #333;
        font-size: 0.65rem;
        margin-bottom: 0.75rem;
        color: #fff;
      }
      .disLink {
        opacity: 0.5;
      }
    }
  }
}
</style>
